<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<form class="layui-form" style="margin-left: 15%;margin-top: 10px">
    <input name="id" id="id" type="hidden"/>
    <br/>
    <div class="layui-form-item" style="margin-left: 10%" id="joinVipDiv">
        <div class="layui-input-inline">
            <div id="joinVipEditor" class="w-e-text-container">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top: 50px">
        <div class="layui-input-block">
            <button class="layui-btn" style="margin-left:300px;" lay-submit lay-filter="setSubmit">立即提交</button>
        </div>
    </div>
</form>
<table class="layui-table" id="grid" lay-filter="grid">
</table>
<script th:replace="/common/inc::incJs"></script>
<style type="text/css">

    .w-e-text-container {
        height: 500px !important;
        width: 700px /*!important是重点，因为原div是行内样式设置的高度300px*/
    }
</style>
<script>
    var form = layui.form;
    var E = window.wangEditor;
    var joinVipEditor = new E("#joinVipEditor");
    joinVipEditor.customConfig.qiniu = true;
    joinVipEditor.create();

    // 初始化七牛上传
    uploadInit();

    // 初始化七牛上传的方法
    function uploadInit() {
        var joinVipBtnId = joinVipEditor.imgMenuId;

        var uploaders = Qiniu.uploader({
            runtimes: 'html5,flash,html4', // 上传模式,依次退化
            browse_button: joinVipBtnId, // 上传选择的点选按钮，**必需**
            uptoken_url: '/backend/security/qiniu/getUptoken', // Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
            unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
            domain: 'http://image.intelsalon.com/', //  域名，下载资源时用到，**必需**
            get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的token
            container: joinVipDiv, // 上传区域DOM ID，默认是browser_button的父元素，
            max_file_size: '1000kb', // 最大文件体积限制
            flash_swf_url: '/js/plupload/Moxie.swf', // 引入flash,相对路径
            dragdrop: true, // 开启可拖曳上传
            drop_element: 'joinVipDiv', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
            chunk_size: '5mb', // 分块上传时，每片的体积
            auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
            init: {
                'FilesAdded': function (up, files) {
                    plupload.each(files, function (file) {
                        // 文件添加进队列后,处理相关的事情
                        printLog('on FilesAdded');
                    });
                },
                'BeforeUpload': function (up, file) {
                    // 每个文件上传前,处理相关的事情
                    printLog('on BeforeUpload');
                },
                'UploadProgress': function (up, file) {
                    // 显示进度
                    printLog('进度 ' + file.percent)
                },
                'FileUploaded': function (up, file, info) {
                    // 每个文件上传成功后,处理相关的事情
                    // 其中 info 是文件上传成功后，服务端返回的json，形式如
                    // {
                    //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                    //    "key": "gogopher.jpg"
                    //  }
                    printLog(info);
                    // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

                    var domain = up.getOption('domain');
                    var res = $.parseJSON(info);
                    var sourceLink = domain + res.key; //获取上传成功后的文件的Url

                    printLog(sourceLink);

                    // 插入图片到editor
                    joinVipEditor.cmd.do('insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
                },
                'Error': function (up, err, errTip) {
                    //上传出错时,处理相关的事情
                    printLog('上传失败');
                },
                'UploadComplete': function () {
                    //队列文件处理完毕后,处理相关的事情
                    printLog('上传完毕');
                }
                // Key 函数如果有需要自行配置，无特殊需要请注释
                //,
                // 'Key': function(up, file) {
                //     // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                //     // 该配置必须要在 unique_names: false , save_key: false 时才生效
                //     var key = "";
                //     // do something with key here
                //     return key
                // }
            }
            // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
            // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
        });
    }

    // 封装 console.log 函数
    function printLog(title, info) {
        window.console && console.log(title, info);
    }

    $(function () {
        $.post('/backend/security/joinVip/getById', {id: 1}, function (res) {
            if (res.code < 0) {
                layer.msg(res.message);
            }
            else {
                if (res.body != null) {
                    $("form").loadData(res.body);
                    joinVipEditor.txt.html(res.body.contentsDetail);
                } else {

                }
            }
        });
    });

    form.on('submit(setSubmit)', function (data) {
        data.field.contentsDetail = joinVipEditor.txt.html();
        if ($("#id").val() > 0) {
            $.post('/backend/security/joinVip/update', data.field, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    layer.msg("平台加入会员页配置上传成功");
                }
            });
        } else {
            $.post('/backend/security/joinVip/add', data.field, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    layer.msg("平台加入会员页配置上传成功");
                }
            });
        }
        return false;
    });

</script>
</body>
</html>
